<?php
/**
 * Created by PhpStorm.
 * User: nhson219
 * Date: 10/2/2014
 * Time: 12:18 AM
 */
?>
<div id="modal-login-google" class="modal fade" tabindex="-1" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3><?php echo $this->lang->line("Link to existing Applancer account")?></h3>
            </div>
            <form action="" method="POST" id="frmModalLogingoogle">
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="col-md-3">
                            <img  class="image-avatar-google img-responsive" src="">
                        </div>
                        <div class="col-md-9">
                            <div class="row">
                                The email address is already associated with a Applancer account. Enter your password below to link accounts:
                            </div>
                            <div class="row" style="margin-top: 20px;">
                                <div class="control-group">
                                    <label class="control-label col-md-3">Email: </label>
                                    <div id="email-login-google" class="controls col-md-9">

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="control-group form-group">
                                    <label class="control-label col-md-3"><?php echo $this->lang->line('Password'); ?></label>
                                    <div class="controls col-md-9">
                                        <input type="password" id="password-login-google" class="form-control" name="password">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <p class="loading"></p>
                    </div>
                    <div style="clear:both"></div>
                </div>

                <div class="modal-footer">
                    <button type="submit" name="linkAcc" value="1" class="btn btn-primary"><?php echo $this->lang->line("Link account");?></button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#frmModalLogingoogle").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) { // render error placement for each input type
                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
                } else if (element.attr("name") == "dd" || element.attr("name") == "mm" || element.attr("name") == "yyyy") {
                    error.insertAfter($(element).closest('.form-group').children('div'));
                } else {
                    error.insertAfter(element);
                    // for other inputs, just perform default behavior
                }
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                // display OK icon
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                // add the Bootstrap error class to the control group
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element).closest('.form-group').removeClass('has-error');
                // set error class to the control group
            },

            rules:{
                "password-login-google" : {
                    required : true,
                    minlength : 5
                }
            },
            messages:{
                "password-login-google":{
                    required : "<?php echo $this->lang->line('Password')." ".$this->lang->line('required') ?>",
                    minlength : "<?php echo $this->lang->line('Password')." ".$this->lang->line('min_length'); ?>"
                }
            },
            submitHandler: function (form) {
                //successHandler.show();
                //errorHandler.hide();
                // submit form
                //$('#form').submit();

                jQuery.ajax({
                    type: "POST",
                    data: $("#frmModalLogingoogle").serialize()+"&email="+$("#email-login-google").text(),
                    url: BASE_URL + '/index.php/users/ajaxLinkAcc/',
                    beforeSend: function() {
                        $('.loading').css("text-align", "center").html('<img src="<?php echo image_url("loading.gif")?>"/>');
                    },
                    success: function(data) {
                        $('.loading').empty();

                        var res = $.parseJSON(data);
                        if(res.status == "COMPLETED"){
                            $('.loading').html("<?php echo $this->lang->line('review_success')?>");
                            setTimeout(5000);
                            window.location.href = BASE_URL+'index.php/'+res.url_redirect;
                        }else if(res.status == "ERROR"){
                            $('.loading').addClass('error').html(res.message);
                        }
                    }
                });

                return false;
            }


        });

    });

</script>